<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script src="../js/axios.min.js"></script>
	<script src="../js/vue.js"></script>
	<title>购物车</title>
	<style>
		#app {
			width: 900px;
			margin: 0 auto;
			text-align: center;
			user-select: none;
		}

		table {
			width: 900px;
			margin-top: 20px;
			border-radius: 8px;
			background-color: #fff1f1;
			padding: 5px;
			box-shadow: 0px 2px 8px 0px #c7385e;
		}

		table tr:nth-child(even) {
			background: rgb(255, 255, 255);
		}

		th,
		td {
			border: 1px solid #c7385e;
			padding: 5px;
			height: 50px;
		}

		.checkbox {
			width: 20px;
			height: 20px;
			border-radius: 5px;
		}

		button {
			background-color: #ffffff;
			border: 0;
			color: #3d0a0a;
			padding: 4px;
			margin: 5px;
			width: 70px;
			border-radius: 5px;
			box-shadow: 0px 2px 8px 1px #f6bfce;
			transition: all 0.2s;
		}

		button:hover {
			background-color: #ffe4ec;
			box-shadow: 0px 2px 16px 3px #f6bfce;
		}

		button:active {
			background-color: #e4829c;
			box-shadow: 0px 2px 2px 0px #f6bfce;
		}

		input {
			border: 0;
			padding: 4px;
			margin: 5px;
			width: 250px;
			height: 30px;
			border: 0;
			background-color: #fff;
			box-shadow: 0px 2px 8px 1px #f6bfce;
			outline: none;
			transition: all 0.2s;
		}

		input:hover {
			box-shadow: 0px 2px 16px 3px #f6bfce;
		}
	</style>
</head>

<body>
	<div id="app">
		<table>
			<caption style="margin: 10px;">
				<b style="font-size: 30px; color: #662626; text-shadow: 0px 0px 5px #df9999;">购物车</b>
			</caption>
			<tr style="background-color: #c7385e; color: white;">
				<th >
					<label v-if="!allChecked">
						<button @click="checkboxAll()" class="checkbox"></button>全选
					</label>
					<label v-if="allChecked">
						<button @click="checkboxNotAll()" class="checkbox"></button>清空
					</label>
				</th>
				<th>商品图片</th>
				<th>商品名称</th>
				<th>宜美惠价</th>
				<th>数量</th>
				<th>单价</th>
				<th>操作</th>
			</tr>
			<tr v-for="(item, index) in shoppingCart">
				<td><input type="checkbox" v-model="item.checkbox" class="checkbox"></td>
				<td>
					<img :src="item.img" style="width: 50px; height: 50px;"></img>
				</td>
				<td>{{item.name}}</td>
				<td>{{item.price}}</td>
				<td>
					<button @click="sub(index)" style="width: 30px;">-</button>
					{{item.count}}
					<button @click="add(index)" style="width: 30px;">+</button>
				</td>
				<td>{{item.price * item.count}}</td>
				<td>
					<button @click="shoppingCart.splice(index, 1)">删除</button>
				</td>
			</tr>
			<tr>
				<td colspan="7" style="font-size: 20px; color: #c7385e; text-align: right;">
					总价：{{priceAll()}} <div style="display: inline-block; width: 200px;"> </div>
				</td>
			</tr>
		</table>
	</div>
</body>

<script>
	new Vue({
		el: "#app",
		data: {
			shoppingCart: [
				{ checkbox: false, img: "./1.png", name: "中性笔", price: 6, count: 1 },
				{ checkbox: false, img: "./2.jpg", name: "小甜水", price: 5, count: 1 }
			]
		},
		computed: {
			allChecked() {
				return this.shoppingCart.every(item => item.checkbox);
			}
		},
		methods: {
			sub(index) {
				if (this.shoppingCart[index].count > 1) {
					this.shoppingCart[index].count--;
				}
			},
			add(index) {
				this.shoppingCart[index].count++;
			},
			checkboxAll() {
				this.shoppingCart.forEach(item => item.checkbox = true);
			},
			checkboxNotAll() {
				this.shoppingCart.forEach(item => item.checkbox = false);
			},
			priceAll() {
				return this.shoppingCart.filter(item => item.checkbox).reduce((total, item) => total + item.price * item.count, 0);
			}
		}
	})
</script>

</html>